<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="content">我的班级</block>
		</cu-custom>
		<view>
			<view style="width: 100%; height: 350rpx;">
				<image style="width: 100%; height: 300rpx; filter:brightness70%)" :src="url"></image>
			</view>
			<view style="width: 110rpx; height: 110rpx; margin: -110rpx 0rpx 0rpx 60rpx;">
				<view>
					<image style="width: 110rpx; height: 110rpx; border-radius: 10rpx;" :src="url_a"></image>
				</view>
			</view>
			<view class="schoolName"
				style="width: 100%; height: 180rpx; background-color: #FFFFFF; margin-top: -55rpx; padding: 65rpx 0rpx 10rpx 60rpx;">
				<!-- <view style="font-size: 40rpx; margin-bottom: 10rpx; font-weight: bold;">{{classinfo.class_name}}111</view> -->
				<view style="font-size: 40rpx; margin-bottom: 10rpx; font-weight: bold;">22届信息技术学院</view>
				<!-- <text class="tabwords">{{studentinfo.school_name}}</text> -->
				<text class="tabwords">南昌职业大学</text>
			</view>
		</view>
		<view class="classgroupinfo" style="background-color: white; margin-top: 15rpx;">
			<view class="groupinfoitem">
				<view class="groupinfo flex">
					<text class="cuIcon-titles" style="font-size: 45rpx; color: #3b73f6;"></text>
					<text>学生列表</text>
					<text class="text-gray" style="margin-left: 20rpx;">({{students.length}}人)</text>
				</view>
			</view>
			<view class="groupprofile">
				<view class="paddings">
					<view class="avatarlist" v-for="(item,index) in students" :key="index">
						<view class="avatarname">
							<image class="avatarpic" :src="item.user.avatar" mode="aspectFill"></image>
							<block>
								<!-- <view v-if="item.user.real_name" class="realnick">{{item.user.real_name}}</view>
								<view v-else class="realnick">{{item.user.nickname}}</view>-->
								<!-- <view class="realnick">{{item.user.real_name?item.user.real_name:item.user.nickname}}</view> -->
								<view class="realnick">{{item.user.real_name||item.user.nickname}}</view>
							</block>
						</view>
						<!-- <image v-for="(imgItem,imgIndex) in item.images" :key="imgIndex"  :src="imgItem" @tap="picamplif"></image> -->
						<!-- <view class="avaterinfo" v-for="(imgItem,imgIndex) in item.avatar" :key='imgIndex'>
							
							<image class="avatarpic" :src="item.avatar">
						</view> -->
						<!-- <view class="cu-tag badge" :class="index%2==0?'cuIcon-female bg-pink':'cuIcon-male bg-blue'"></view> -->
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		msg
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				url: 'http://www.555edu.com/d/file/2018-04-03/1617f058d34fa3d52031266d389580e2.jpg',
				url_a: 'http://newpic.jxnews.com.cn/003/028/833/00302883396_1216dd18.jpg',
				class_id: '',
				class_name: '',
				teacher_id: '',
				students: [],
				classinfo: '',
				school_id: '',
				studentinfo: '',
				realnick: true,
				realnicks: true,
				user: 'real_name',
			}
		},
		onLoad(option) {
			appLogin((user_info) => {

				this.class_id = option.class_id
				console.log(this.class_id, option)
				this.getclassinfo()
				this.getschoolinfo()
			})
		},
		methods: {
			getclassinfo() {
				httpGet({
					url: '/api/school/class_info',
					data: {
						class_id: this.class_id,
					}
				}).then((res) => {
					console.log(res)
					this.classinfo = res.result
					this.students = res.result.students
				})
			},
			getschoolinfo() {
				httpGet({
					url: '/api/student/info'
				}).then((res) => {
					this.studentinfo = res.result
				})
			},
		}
	}
</script>

<style>
	.tabwords {
		color: gray;
		font-size: 28rpx;
	}

	.groupinfoitem {
		width: 100%;
		height: 150rpx;
		line-height: 150rpx;
		justify-content: center;
		align-items: center;
	}

	.paddings {
		display: flex;
		flex-wrap: wrap;
		margin: 0 auto;
		width: 680rpx;
		/* height: 200rpx; */
		padding: 20rpx;
	}

	.avatarlist {
		width: 120rpx;
		height: 180rpx;
		margin: 0rpx 20rpx 20rpx 20rpx;
	}

	.avatarpic {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		
	}

	.avatarname {
		text-align: center;
	}

	.realnick {
		height: 40rpx;
	}
</style>
